/*
 * @Autor: dc
 * @Date: 2022-03-18 17:47:13
 * @LastEditors: dc
 * @LastEditTime: 2022-03-21 15:21:52
 * @Description: 
 */
import React, { Component } from 'react';
// 订阅消息
import PubSub from 'pubsub-js'
class index extends Component {
    state = { list: [], loading: true, prompt: '欢迎使用老牌搜索' };
    componentDidMount(){
        // 订阅方法
        this.token = PubSub.subscribe('atguigu',(msg,data)=>{
            console.log(data);
            this.setList(data);
        })
        this.loadingToken = PubSub.subscribe('loadingSub',(msg,data)=>{
            console.log(data)
            this.setLoading(data);
        })
    }
    componentWillUnmount(){
        // 注销订阅
        PubSub.unsubscribe(this.token)
        PubSub.unsubscribe(this.loadingToken)

    }
    setList = (arr) => {
        this.setState({
            list: arr
        })
    }

    setLoading = (data) => {
        this.setState({
            loading: data[0],
            prompt: data[1]
        })
    }

    render() {
        const { list, loading, prompt } = this.state;
        let listDome;
        if (loading) {
            listDome = (<text>{prompt}</text>)
        } else {
            listDome = (list.map(item => {
                return <li key={item.id}>{item.name}</li>
            }))
        }
        return (
            <div>
                <ul>
                    {
                        listDome
                    }
                </ul>
            </div>
        );
    }
}

export default (index);